/*
 * @Date         : 2022-03-03 15:45:51
 * @LastEditors  : zu1662
 * @LastEditTime : 2022-03-03 16:07:36
 * @Description  : screenfull hook 封装
 * 
 * Copyright © 2022 by zu1662, All Rights Reserved. 
 */
import { Toast } from '@douyinfe/semi-ui'
import { useCallback, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import screenfull from 'screenfull'

const useFullscreen = (): [boolean, () => void] => {
  const { t } = useTranslation()
  const [isScreenFull, setIsScreenFull] = useState(false)

  // 点击切换全屏状态
  const toggerFullScreen = useCallback(() => {
    if(!screenfull.isEnabled) {
      Toast.warning(t('layout.fullDisable'))
    }else {
      screenfull.toggle()
    }
  }, [t])

  // 屏幕状态更改回调
  const screenChange = () => {
    setIsScreenFull(screenfull.isFullscreen)
  }

  useEffect(() => {
    if (screenfull.isEnabled) {
      screenfull.on('change', screenChange)
    }
    return () => {
      if (screenfull.isEnabled) {
        screenfull.off('change', screenChange)
      }
    }
  }, [])

  return [isScreenFull, toggerFullScreen]
}

export default useFullscreen